<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>作业</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <style>
  .btn{
    background: rgb(0, 4, 255);

  }
  .btn:hover{
    background: #0ff;
  }
  </style>
</head>
<body>


  
    

  <div class="container">
    <form class="form-contact">
      <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" class="form-control" name="name" placeholder="请输入姓名" value="张三">
      </div>
      <div class="form-group">
        <label for="phone">性别</label>
        <input type="tel" class="form-control" name="phone" placeholder="性别" value="女">
      </div>
      <div class="form-group">
        <label for="email">年龄</label>
        <input type="email" class="form-control" name="email" placeholder="年龄" value="20">
      </div>
      <div class="form-group">
        <button type="button" class="btn btn-default btn-save">保存</button>
      </div>
    </form>

    <div class="table-responsive">
      <table class="table table-hover table-striped table-bordered table-contact">
        <thead>
          <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>

  <div class="modal fade" id="edit-form" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">修改</h4>
        </div>
        <div class="modal-body">
          <form class="modal-contact">
            <div class="form-group">
              <label for="modal-name">姓名</label>
              <input type="text" class="form-control" name="name" id="modal-name" placeholder="请输入姓名">
            </div>
            <div class="form-group">
              <label for="modal-phone">性别</label>
              <input type="tel" class="form-control" name="phone" id="modal-phone" placeholder="性别">
            </div>
            <div class="form-group">
              <label for="modal-email">年龄</label>
              <input type="email" class="form-control" name="email" id="modal-email" placeholder="年龄">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary btn-edit">保存修改</button>
        </div>
      </div>
    </div>
  </div>


  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script>
 
    var dataAll = sessionStorage.getItem('list');
    dataAll = dataAll ? JSON.parse(dataAll) : [];
    
  
    function rander(){
      var trs = '';
      dataAll.forEach(v => {
        trs += `<tr>
          <td>${v.name}</td>
          <td>${v.phone}</td>
          <td>${v.email}</td>
          <td>
            <button class='btn btn-danger btn-sm delete'>删除</button>
            <button class='btn btn-danger btn-sm edit'>修改</button>
          </td>
        </tr>`
      })
      $('.table tbody').html(trs);
    }

    rander();

    $(".btn-save").on('click', function(){

    

      var obj = {
        name: $('.form-contact input[name=name]').val(),
        phone: $('.form-contact input[name=phone]').val(),
        email: $('.form-contact input[name=email]').val(),
      }
      

      dataAll.push(obj);
      sessionStorage.setItem('list', JSON.stringify(dataAll));
      
      
      var trs = `<tr>
        <td>${obj.name}</td>
        <td>${obj.phone}</td>
        <td>${obj.email}</td>
        <td>
          <button class='btn btn-danger btn-sm delete'>删除</button>
          <button class='btn btn-danger btn-sm edit'>修改</button>
        </td>
      </tr>`;

      $('.table tbody').append(trs);
    })

  
    $(".table tbody").on('click', '.delete', function(){
      var tr = $(this).parent().parent();

      dataAll.splice(tr.index(), 1);
      sessionStorage.setItem('list', JSON.stringify(dataAll));

      tr.remove(); 
    })

    
    .on('click', '.edit', function(){
      var tr = $(this).parent().parent();

      var obj = dataAll[ tr.index() ];

      $("#modal-name").val(obj.name);
      $("#modal-phone").val(obj.phone);
      $("#modal-email").val(obj.email);

      $('#edit-form').data("index", tr.index()).modal();
    })

    
    $(".btn-edit").on('click', function(){
 
      var index = $('#edit-form').data('index');

      dataAll.splice(index, 1, {
        name: $('#edit-form input[name=name]').val(),
        phone: $('#edit-form input[name=phone]').val(),
        email: $('#edit-form input[name=email]').val(),
      })
      sessionStorage.setItem('list', JSON.stringify(dataAll));

    
      $('#edit-form').modal('hide');
    
      rander();
    })
    
 


  </script>

</body>
</html>